// 库&插件
import React, { PureComponent, Suspense } from 'react'
import { NavLink } from "react-router-dom"
import { renderRoutes } from "react-router-config"

// 自行封装&工具
import rocUtils from "roc-utils"

// 样式
import StyledHome from "./styled";

// 组件
import Cpn from "components/cpn";

function HomeNav() {
	return (
		<div className="home-nav">
			<NavLink to="/home/home1">home1</NavLink>
			<span>丨</span>
			<NavLink to="/home/home2">home2</NavLink>
			<span>丨</span>
			<NavLink to="/home/home3">home3</NavLink>
		</div>
	)
}

export default class Home extends PureComponent {
	componentDidMount() {
		document.title = this.props.route.meta.title
		// utils 使用
		console.log(rocUtils.formatDate(new Date()))
	}
	render() {
		return (
			<StyledHome>
				<h1>这是home页面</h1>
				<hr />
				<p>home页面调用的组件：</p>
				<Cpn />
				<hr />
				<p>二级路由：</p>
				<HomeNav />
				<Suspense fallback={<p>加载中...</p>}>
					{renderRoutes(this.props.route.routes)}
				</Suspense>
			</StyledHome>
		)
	}
}
